<template>
	<view class="content">
		<view class="search-box">
			<input class="search-input" v-model="searchName" placeholder="请输入要查询的垃圾名称" />
			<button class="search-btn" @click="searchGarbage">查询</button>
		</view>

		<!-- 结果显示区域 -->
		<view class="result-box" v-if="result">
			<view class="result-item">
				<text class="label">垃圾名称：</text>
				<text class="value">{{ result.name }}</text>
			</view>
			<view class="result-item">
				<text class="label">垃圾类型：</text>
				<text class="value">{{ getTypeText(result.type) }}</text>
			</view>
			<view class="result-item">
				<text class="label">说明：</text>
				<text class="value">{{ result.explain }}</text>
			</view>
			<view class="result-item">
				<text class="label">包含物品：</text>
				<text class="value">{{ result.contain }}</text>
			</view>
			<view class="result-item">
				<text class="label">投放提示：</text>
				<text class="value">{{ result.tip }}</text>
			</view>
		</view>

		<!-- 发送短信功能 -->
		<view class="action-box">
			<input class="phone-input" v-model="phoneNumber" type="number" placeholder="请输入接收短信的手机号码" />
			<button class="action-btn" @click="sendMessage">发送短信</button>
		</view>

		<!-- 退出应用按钮 -->
		<view class="action-box">
			<button class="action-btn exit-btn" @click="exitApplication">退出应用</button>
		</view>

		<!-- 系统信息区域 -->
		<view class="system-info" v-if="systemInfo">
			<view class="info-title">设备信息</view>
			<view class="info-item">
				<text class="info-label">设备品牌：</text>
				<text class="info-value">{{ systemInfo.brand }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">设备型号：</text>
				<text class="info-value">{{ systemInfo.model }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">系统类型：</text>
				<text class="info-value">{{ systemInfo.platform }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">系统版本：</text>
				<text class="info-value">{{ systemInfo.system }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">网络类型：</text>
				<text class="info-value">{{ networkType }}</text>
			</view>
			<view class="info-item" v-if="batteryLevel !== '不支持'">
				<text class="info-label">电池电量：</text>
				<text class="info-value">{{ batteryLevel }}%</text>
			</view>
			<view class="info-item" v-else>
				<text class="info-label">电池电量：</text>
				<text class="info-value">不支持</text>
			</view>
		</view>

		<!-- 版权信息 -->
		<view class="copyright">
			<text class="copyright-text">© 2024 {{ copyright.author }}</text>
			<text class="copyright-text">公众号：{{ copyright.wechat }}</text>
			<text class="copyright-text phone-link" @click="makePhoneCall">电话：{{ copyright.phone }}</text>
			<text class="copyright-text">官网：{{ copyright.website }}</text>
		</view>
	</view>
</template>

<script>
// 导入 API 服务
import { searchGarbage } from '@/api/garbage.js'
// 导入常量配置
import { GARBAGE_TYPE_MAP, COPYRIGHT_INFO } from '@/config/constants.js'
// 导入工具函数
import { getSystemInfo, getNetworkType } from '@/utils/system.js'

// #ifdef APP-HARMONY
// 仅鸿蒙会编译， 导入打电话，导入退出应用模块,导入电池信息工具
import { makeCall, exitAPP, sendSms, getBatteryInfo } from '@/uni_modules/nutpi-utils';
// #endif





export default {
	data() {
		return {
			searchName: '',
			result: null,
			systemInfo: null,
			networkType: '未知',
			copyright: COPYRIGHT_INFO,
			batteryLevel: 0,
			phoneNumber: ''
		}
	},
	onLoad() {
		this.initSystemInfo()
		this.initNetworkInfo()
		this.getBatteryInfo()
	},
	methods: {
		async searchGarbage() {
			if (!this.searchName) {
				uni.showToast({
					title: '请输入垃圾名称',
					icon: 'none'
				})
				return
			}

			try {
				this.result = await searchGarbage(this.searchName)
			} catch (e) {
				uni.showToast({
					title: e.message || '查询失败',
					icon: 'none'
				})
			}
		},

		getTypeText(type) {
			return GARBAGE_TYPE_MAP[type] || '未知类型'
		},

		async initSystemInfo() {
			this.systemInfo = getSystemInfo()
		},

		async initNetworkInfo() {
			try {
				this.networkType = await getNetworkType((type) => {
					this.networkType = type
				})
			} catch (e) {
				this.networkType = '获取失败'
			}
		},
		getBatteryInfo() {
			// 获取电量信息
			getBatteryInfo({
				success: (res) => {
					this.batteryLevel = res.level

				},
				fail: () => {
					this.batteryLevel = '未知'
				}
			})

		},

		makePhoneCall() {
			// #ifdef APP-HARMONY
			makeCall(this.copyright.phone);
			// #endif

			// #ifndef APP-HARMONY
			uni.showToast({
				title: '当前平台不支持拨打电话功能',
				icon: 'none'
			});
			// #endif
		},
		sendMessage() {
			// 验证手机号码格式
			if (!this.phoneNumber || !/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
				return;
			}

			// #ifdef APP-HARMONY
			// 仅鸿蒙会编译
			// 构建短信内容
			let messageContent = '垃圾分类查询应用';
			if (this.result) {
				messageContent = `垃圾名称：${this.result.name}\n类型：${this.getTypeText(this.result.type)}\n说明：${this.result.explain}\n投放提示：${this.result.tip}`;
			}
			// 发送短信
			sendSms(this.phoneNumber, messageContent);
			// #endif

			// #ifndef APP-HARMONY
			// 非鸿蒙平台
			uni.showToast({
				title: '当前平台不支持发送短信功能',
				icon: 'none'
			});
			// #endif
		},

		// 添加退出应用方法
		exitApplication() {
			// 调用退出应用模块
			exitAPP();
		}
	}
}
</script>
.phone-link {
color: #0080ff;
text-decoration: underline;
cursor: pointer;
}
.phone-link:active {
opacity: 0.8;
}
<style>
.content {
	padding: 30rpx;
	background-color: #f9fafc;
	min-height: 100vh;
	box-sizing: border-box;
}

.search-box {
	display: flex;
	gap: 20rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	padding: 24rpx;
	border-radius: 16rpx;
	background-color: #fff;
	transform: translateY(0);
	transition: all 0.3s ease;
}

.search-box:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.12);
}

.search-input {
	flex: 1;
	height: 88rpx;
	padding: 0 32rpx;
	border: 2rpx solid #eaedf2;
	border-radius: 12rpx;
	font-size: 30rpx;
	background-color: #f5f7fa;
	transition: all 0.3s ease;
	color: #2c3e50;
}

.search-input:focus {
	border-color: #0080ff;
	background-color: #fff;
}

.search-btn {
	width: 180rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #0080ff, #0065cc);
	color: #fff;
	border-radius: 12rpx;
	font-weight: 600;
	font-size: 32rpx;
	box-shadow: 0 8rpx 16rpx rgba(0, 128, 255, 0.25);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.search-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.search-btn:active::after {
	opacity: 1;
}

.search-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 8rpx rgba(0, 128, 255, 0.2);
}

.result-box {
	background-color: #fff;
	padding: 36rpx;
	border-radius: 16rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	transform: translateY(0);
	transition: all 0.3s ease;
}

.result-box:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.12);
}

.result-item {
	margin-bottom: 28rpx;
	padding-bottom: 24rpx;
	border-bottom: 2rpx solid #f0f2f5;
	transition: all 0.3s ease;
}

.result-item:hover {
	background-color: #f9fafc;
	padding-left: 16rpx;
	padding-right: 16rpx;
	margin-left: -16rpx;
	margin-right: -16rpx;
	border-radius: 8rpx;
}

.result-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.label {
	color: #5e6c84;
	font-size: 28rpx;
	font-weight: 600;
	letter-spacing: 0.5rpx;
}

.value {
	color: #2c3e50;
	font-size: 30rpx;
	margin-left: 16rpx;
	line-height: 1.6;
	font-weight: 500;
}

.system-info {
	margin-top: 30rpx;
	padding: 36rpx;
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.system-info:hover {
	box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.12);
}

.info-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid #f0f2f5;
}

.info-item {
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	padding: 12rpx 16rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;
}

.info-item:hover {
	background-color: #f9fafc;
}

.info-label {
	color: #5e6c84;
	font-size: 26rpx;
	width: 160rpx;
}

.info-value {
	color: #172b4d;
	font-size: 26rpx;
	flex: 1;
}

.copyright {
	margin-top: 80rpx;
	text-align: center;
	padding: 40rpx;
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.copyright-text {
	display: block;
	font-size: 26rpx;
	color: #8492a6;
	line-height: 1.8;
	margin-bottom: 12rpx;
	transition: all 0.3s ease;
}

.copyright-text:hover {
	color: #2c3e50;
}

/* 添加发送短信按钮样式 */
.action-box {
	margin: 32rpx 0;
	display: flex;
	justify-content: center;
	gap: 20rpx;
}

.phone-input {
	flex: 1;
	height: 88rpx;
	padding: 0 32rpx;
	border: 2rpx solid #eaedf2;
	border-radius: 12rpx;
	font-size: 30rpx;
	background-color: #f5f7fa;
	transition: all 0.3s ease;
	color: #2c3e50;
	margin-right: 20rpx;
}

.phone-input:focus {
	border-color: #0080ff;
	background-color: #fff;
}

.search-btn {
	width: 180rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #00c6fb, #005bea);
	color: #fff;
	border-radius: 12rpx;
	font-weight: 600;
	font-size: 32rpx;
	box-shadow: 0 8rpx 16rpx rgba(0, 128, 255, 0.25);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.search-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.search-btn:active::after {
	opacity: 1;
}

.search-btn:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 28rpx rgba(0, 128, 255, 0.3);
}

.search-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 8rpx rgba(0, 204, 102, 0.2);
}

/* 退出按钮样式 */
.exit-btn {
	background: linear-gradient(135deg, #ff6b6b, #ee5253);
	box-shadow: 0 8rpx 16rpx rgba(238, 82, 83, 0.25);
}

.exit-btn:hover {
	box-shadow: 0 12rpx 28rpx rgba(238, 82, 83, 0.3);
}

.exit-btn:active {
	box-shadow: 0 2rpx 8rpx rgba(204, 0, 0, 0.2);
}
</style>
